<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar title="专家" :border-bottom="false"></fa-navbar>
		<fa-u-sticky>
			<view class="sticky" :style="[{ backgroundColor: theme.bgColor || '#2979ff' }]">
				<view class="" v-if="categoryList.length > 0" :style="[{ backgroundColor: theme.bgColor || '#2979ff' }]">
					<!-- #ifdef MP-BAIDU -->
					<fa-u-tabs
						:list="categoryList"
						:is-scroll="true"
						:bg-color="theme.bgColor"
						:active-color="theme.color"
						:bar-width="catewidth"
						inactive-color="#eee"
						:current="catecur"
						@change="cateChange"
					></fa-u-tabs>
					<!-- #endif -->
					<!-- #ifndef MP-BAIDU -->
					<u-tabs
						:list="categoryList"
						:is-scroll="true"
						:bg-color="theme.bgColor"
						:active-color="theme.color"
						:bar-width="catewidth"
						inactive-color="#eee"
						:current="catecur"
						@change="cateChange"
					></u-tabs>
					<!-- #endif -->
				</view>
			</view>
		</fa-u-sticky>
		<u-gap height="60" bg-color="#f4f6f8"></u-gap>
		<view class="u-p-l-20 u-p-r-20 u-p-t-30 u-p-b-10 experts-list">
			<view class="u-flex u-flex-wrap">
				<wanl-empty class="w100" v-if="list.length == 0"></wanl-empty>
				<view class="experts u-text-center" v-for="(item, index) in list" textAlign="center" :key="index">
					<view class="experts-item" @click="goDetail(item.id)">
						<u-avatar :src="item.avatar" size="140"></u-avatar>
						<view class="u-tips-color u-p-20" v-text="item.username"></view>
						<view class="u-light-color u-p-b-10 tips" v-text="item.experttitle || ''"></view>
						<u-button hover-class="none"
							type="primary"
							size="mini"
							:custom-style="{ backgroundColor: theme.bgColor, color: theme.color }"
							shape="circle"
							:ripple="true"
							@click="goPost(item.id)"
						>
							向TA提问
						</u-button>
					</view>
				</view>
			</view>
			<view class="u-p-t-30 u-p-b-30" v-if="list.length > 0"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
			<fa-add-ask type="custom" @custom="apply" :custom-style="{backgroundColor:theme.bgColor}">
				<view class="u-text-center u-font-22" :style="[{color:theme.color}]">
					<view class="">申请</view>
					<view class="">认证</view>
				</view>
			</fa-add-ask>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{color:theme.color}" :custom-style="{backgroundColor:theme.bgColor}"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.getExpertIndex();
	},
	data() {
		return {
			categoryList:[],
			catecur: 0,
			category_id:0,
			catewidth: 40,
			list: [],
			page: 1,
			status: 'loadmore',
			scrollTop: 0,
			has_more: false,
			is_update:false
		};
	},
	methods: {
		cateChange(index) {
			this.catecur = index;
			//重设Bar宽度
			this.catewidth = this.$util.strlen(this.categoryList[index].name) * 30;
			this.category_id = this.categoryList[index].id;
			this.is_update = true;
			this.getExpertIndex();
		},
		goDetail(id) {			
			this.$wanlshop.to(`/pages/community/experts/detail?id=${id}`)
		},
		goPost(id) {			
			this.$wanlshop.to(`/pages/community/question/post?user_id=${id}`)
		},
		apply() {
			if (!this.vuex_token) {
				this.$wanlshop.to(`/pages/user/auth/name?url=${encodeURIComponent('/pages/community/experts/index')}`);
				return;
			}		
			this.$wanlshop.to('/pages/community/experts/post');
		},
		getExpertIndex: async function() {
			let res = await this.$api.getExpertIndex({ page: this.page,category_id:this.category_id });
			uni.stopPullDownRefresh();
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if(this.is_update){
				this.list = [];
				this.is_update = false;
			}
			if(res.data.categoryList.length >= this.categoryList.length){
				this.categoryList = [{name:'全部',id:''},...res.data.categoryList];
			}
			this.has_more = res.data.expertList.current_page < res.data.expertList.last_page;
			this.list = this.list.concat(res.data.expertList.data);
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//下拉刷新
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getExpertIndex();
	},
	//底部加载更多
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getExpertIndex();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
.experts {
	width: 50%;
	padding: 20rpx;
}
.experts-item {
	background: #fff;
	border-radius: 20rpx;
	border-radius: 8rpx;
	padding: 40rpx 20rpx;
	.tips{
		height: 50rpx;
	}
}
.experts-item .u-btn {
	margin-top: 20rpx;
}
/* #ifdef H5 */
.experts-list .u-row {
	display: flex;
	flex-wrap: wrap;
}
/* #endif */
</style>
